<!-- 访问号维护 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <el-form ref="formSearch" :model="formData" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="80px">
        <el-form-item label="医院名称" prop="hospitalCode">
          <el-select size="small" class="param-type_input" filterable v-model="formData.hospitalCode" placeholder="请选择" @change="hospitalChange">
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="m-l-0 click-button" size="small" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <div class="image-content">
        <div class="image-main">
          <div class="title">访问号维护</div>
          <el-table
            ref="table"
            v-loading="loading"
            size="medium"
            :data="tableData"
            style="width: 100%"
            border
            class="ky-table"
            highlight-current-row
          >
            <!-- <el-table-column type="selection" width="40" label="选择"></el-table-column> -->
            <!-- <el-table-column align="left" prop="ID" label="ID"></el-table-column> -->
            <el-table-column align="left" label="操作" v-if="$hasPermission(['YJYY10005009','YJYY10005010'])" width="180">
              <template slot-scope="scope">
                <div class="flex flex-row justify-center text-center">
                  <el-button type="primary" size="small" v-permission="'YJYY10005009'" @click="openEditor(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
                  <el-button type="danger" size="small" v-permission="'YJYY10005010'" @click="handleDelete(scope.row.id)"><i class="el-icon-delete"></i> 删除</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="hospitalCode" label="医院代码" show-overflow-tooltip> </el-table-column>
            <el-table-column align="left" prop="hospitalCode" label="医院名称" :formatter="frtHospCode" show-overflow-tooltip></el-table-column>
            <el-table-column align="left" prop="charFlag" label="访问号前缀" width="100"></el-table-column>
            <el-table-column align="left" prop="streamId" label="访问号序号" width="100"></el-table-column>
            <el-table-column align="left" prop="streamDate" label="访问号生成时间"></el-table-column>
            <!-- <el-table-column align="left" prop="startNumber" label="初始号码"></el-table-column> -->
          </el-table>
          <paginationCont
            :total="totalCount"
            :page.sync="currentPage"
            :limit.sync="pageSize"
            @pagination="changePagenation"
          />
        </div>
        <div class="right-panel">
          <div class="panel-head">
            <div class="title">{{currentStatus === pageStatus.add ? '添加':'编辑'}}</div>
            <div class="blue-color" @click="addClick" v-show="currentStatus === pageStatus.edit" v-permission="'YJYY10005011'"><i class="el-icon-plus icon"></i>新增</div>
          </div>
          <el-form inline class="rule-form" ref="form" :model="ruleForm" :rules="rules">
            <el-form-item label="医院名称:" prop="hospitalCode" class="short-input">
              <el-select
                size="small"
                class="param-type_input"
                filterable
                v-model="ruleForm.hospitalCode"
                placeholder="请选择"
                @change="handleChange('dep')"
                :disabled="currentStatus===pageStatus.edit">
                <el-option
                  v-for="(item,index) in mx_hospitalList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="访问号前缀:" prop="charFlag" class="short-input">
              <el-input size="small" v-model="ruleForm.charFlag" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item class="buttons">
              <el-button class="m-l-1" type="primary" size="small" v-permission="['YJYY10005009','YJYY10005011']" @click="handleConfirm">保存</el-button>
              <el-button v-if="currentStatus === pageStatus.add" class="m-l-1" size="small" @click="handleCancle">取消</el-button>
              <el-button v-else class="m-l-1" size="small" type="danger" v-permission="'YJYY10005010'" plain @click="handleDelete(ruleForm.id)">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getStreamIdpages, setStreamIdpages, updateStreamIdPages, deleteStreamIdPages } from '@/api/api.js'
import { PageStatus } from '@/utils/constant'
import paginationCont from '@/components/Pagination/index'
export default {
  name: '',
  components: { paginationCont },
  data() {
    return {
      pageStatus: PageStatus,
      currentStatus: PageStatus.add,
      loading: false,
      tableData: [],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      multipleSelection: [],
      depOptions: [],
      modalityOptions: [],
      ruleForm: {
        hospitalCode: this.$store.state.user.hospitalCode,
        hospitalName: this.$store.state.user.hospitalName,
        charFlag: ''
      },
      rules: {
        hospitalCode: { required: true, message: '请选择医院名称', trigger: ['blur', 'change'] }
        // charFlag: { required: true, message: '请填写前缀符号', trigger: 'blur' }
      },
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode
      }
    }
  },
  watch: {},
  computed: {},
  created() {
    this.$getHospitalList()
  },
  mounted() {
    this.ruleForm.hospitalCode = this.$store.state.user.hospitalCode
    this.ruleForm.hospitalName = this.$store.state.user.hospitalName
    this.search()
  },
  methods: {
    hospitalChange() {
      this.ruleForm.hospitalCode = this.formData.hospitalCode
      this.search()
    },
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          let hospitalObj = this.mx_hospitalList.find((e) => {
            return e.code === this.ruleForm.hospitalCode
          })
          this.ruleForm.hospitalName = hospitalObj.name
          if (this.currentStatus === this.pageStatus.add) {
            setStreamIdpages(this.ruleForm).then((res) => {
              if (res.code === 10000) {
                this.$message.success('保存成功')
                this.changePagenation()
                this.handleReset()
              }
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          } else {
            updateStreamIdPages(this.ruleForm).then((res) => {
              if (res.code === 10000) {
                this.$message.success('修改成功')
                this.changePagenation()
                this.handleReset()
                this.currentStatus = this.pageStatus.add
              }
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          }
        } else {
          setTimeout(() => {
            var isError = document.getElementsByClassName('is-error')
            isError[0].querySelector('input').focus()
          }, 100)
        }
      })
    },
    handleCancle() {
      this.handleReset()
    },
    handleReset() {
      this.$refs.form.resetFields()
    },
    openEditor(row) {
      /* 编辑 */
      this.currentStatus = this.pageStatus.edit
      this.ruleForm = Object.assign(this.ruleForm, row)
    },
    handleDelete(id) {
      /* 删除 */
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteStreamIdPages({ hospitalCode: this.ruleForm.hospitalCode, id: id }).then((res) => {
          if (res.code === 10000) {
            this.$message.success('删除成功')
            this.changePagenation()
            this.handleReset()
            this.currentStatus = this.pageStatus.add
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addClick() {
      this.currentStatus = this.pageStatus.add
      this.handleReset()
    },
    fetchData() {
      this.loading = true
      let data = {
        HospitalCode: this.formData.hospitalCode,
        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }
      getStreamIdpages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    changePagenation() {
      this.fetchData()
    },
    search() {
      // 查询
      this.$refs.formSearch.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    // 格式化医院code
    frtHospCode(row, column, cellValue, index) {
      let name = ''
      let hospIndex = this.mx_hospitalList.findIndex(item => item.code === cellValue)
      if (hospIndex !== -1) {
        name = this.mx_hospitalList[hospIndex].name
      }
      return name
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.image-content{
    display: flex;
    .title{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 15px;
    }
    .image-main{
        width:calc(100% - 250px);
        padding:20px
    }
    .right-panel{
            width:250px;
            padding: 20px;
            border-left: 1px solid #e4e7ed;
            min-height: 500px;
            .panel-head{
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .buttons{
                margin-bottom: 0px;
                margin-top: 10px;
                .el-button{
                    width:90px;
                }
            }
        }
        .blue-color{
            color:#1890FF;
            cursor: pointer;
        }
        .icon{
            margin-right:4px;
        }
}
</style>
